<!-- <template>
  <div class="home">
    <header>首页</header>
    <van-grid column-num="5" :border="false" :square="true">
      <van-grid-item
        v-for="item in channelList"
        :key="item.id"
        :icon="item.icon_url"
        :text="item.name"
        @click="ChannelJump(item.id, item.sort_order)"
      />
    </van-grid>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { storeToRefs } from "pinia";
import { useRouter } from "vue-router";
import { getHomeList } from "../server/home.js";
import { useCounterStore } from "../stores/counter";
const counterStore = useCounterStore();
const {} = storeToRefs(counterStore);
const router = useRouter();
let homeList = reactive({});
let channelList = reactive([
  {
    id: 1005000,
    name: "居家",
    url: "/pages/category/category?id=1005000",
    icon_url:
      "https://yanxuan.nosdn.127.net/4f00675caefd0d4177892ad18bfc2df6.png",
    sort_order: 1,
  },
  {
    id: 1005001,
    name: "餐厨",
    url: "/pages/category/category?id=1005001",
    icon_url:
      "https://yanxuan.nosdn.127.net/4aab4598017b5749e3b63309d25e9f6b.png",
    sort_order: 2,
  },
  {
    id: 1008000,
    name: "配件",
    url: "/pages/category/category?id=1008000",
    icon_url:
      "https://yanxuan.nosdn.127.net/288b0e864a24763bade8e22c0c39ff02.png",
    sort_order: 3,
  },
  {
    id: 1005002,
    name: "饮食",
    url: "/pages/category/category?id=1005002",
    icon_url:
      "https://yanxuan.nosdn.127.net/93168242df456b5f7bf3c89653b3db76.png",
    sort_order: 4,
  },
  {
    id: 1019000,
    name: "志趣",
    url: "/pages/category/category?id=1019000",
    icon_url:
      "https://yanxuan.nosdn.127.net/f0698297aaac41b778c1ea65eefb8b34.png",
    sort_order: 5,
  },
]);

function changeMsg() {
  // router.push({ name: "mine", query: { a: 111 } });
  router.push({ name: "mine", params: { id: 222 } });
}
function ChannelJump(id, index) {
  router.push(`/channel?id=${id}`);
}
onMounted(() => {
  getHomeList().then((res) => {
    homeList = res.data;
    counterStore.sethomeList(res.data);
  });
});
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  overflow: hidden;
  height: calc(100% - 3.4375rem);
  background-color: skyblue;
}
</style> -->
<template>
  <div class="home">
    <!-- 搜索框 -->
    <van-search
      shape="round"
      background="#fff"
      @click-input="goSearch"
      placeholder="请输入搜索关键词"
    />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="skyblue">
      <van-swipe-item v-for="item in bannerList" :key="item.id">
        <img :src="item.image_url" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 导航 -->
    <van-grid column-num="5" :border="false" :square="true">
      <van-grid-item
        v-for="item in navList"
        :key="item.id"
        :icon="item.icon_url"
        :text="item.name"
        @click="ChannelJump(item.id, item.sort_order)"
      />
    </van-grid>
    <!-- 供应商 -->
    <van-nav-bar title="品牌制造商直供" />
    <van-grid column-num="2" :border="false">
      <van-grid-item
        v-for="item in brandList"
        :key="item.id"
        @click="goDetail(item.id)"
      >
        <template #default>
          <van-image :src="item.pic_url" />
          <div class="text">
            <h4>{{ item.name }}</h4>
            <span>￥{{ item.floor_price.toFixed(2) }}</span>
          </div>
        </template>
      </van-grid-item>
    </van-grid>
    <!-- 周一周四 -->
    <van-nav-bar title="周一周四·新品首发" />
    <van-grid column-num="2" :border="false">
      <van-grid-item
        v-for="item in newGoodsList"
        :key="item.id"
        @click="goDetail(item.id)"
      >
        <template #default>
          <van-image :src="item.list_pic_url" />
          <div class="week">
            <h4>{{ item.name }}</h4>
            <span>￥{{ item.retail_price.toFixed(2) }}</span>
          </div>
        </template>
      </van-grid-item>
    </van-grid>
    <!-- 人气推荐 -->
    <van-nav-bar title="人气推荐" />
    <van-card
      v-for="item in hotGoodsList"
      :key="item.id"
      :price="item.retail_price.toFixed(2)"
      :desc="item.goods_brief"
      :title="item.name"
      :thumb="item.list_pic_url"
    />
    <!-- 专题精选 -->
    <van-nav-bar title="专题精选" />
    <van-swipe
      class="select"
      :show-indicators="false"
      indicator-color="transparent"
      :width="320"
    >
      <van-swipe-item v-for="item in topicList" :key="item.id">
        <img :src="item.item_pic_url" alt="" />
        <h2>{{ item.title }}</h2>
        <p>{{ item.subtitle }}</p>
      </van-swipe-item>
    </van-swipe>
    <!-- 分类列表 -->

    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div v-for="list in categoryList" :key="list.id">
        <van-nav-bar :title="list.name" />
        <ul class="list">
          <li
            v-for="item in list.goodsList"
            :key="item.id"
            @click="goDetail(item.id)"
          >
            <img v-lazy="item.list_pic_url" alt="" />
            <h4>{{ item.name }}</h4>
            <span>￥{{ item.retail_price.toFixed(2) }}</span>
          </li>
        </ul>
      </div>
    </van-list>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import { getHomeList } from "../server/home";
const router = useRouter();
let homeList = ref({});
const loading = ref(false);
const finished = ref(false);
// 搜索框跳转搜索页
function goSearch() {
  router.push("/search");
}
// 轮播图数据
let bannerList = computed(() => homeList.value.banner);
// 导航数据
let navList = computed(() => homeList.value.channel);
// 获取品牌制造商
let brandList = computed(() => homeList.value.brandList);
// 获取周一周四新品
let newGoodsList = computed(() => homeList.value.newGoodsList);
// 获取人气推荐数据
let hotGoodsList = computed(() => homeList.value.hotGoodsList);
// 获取精选数据
let topicList = computed(() => homeList.value.topicList);
// 获取首页分类列表
let categoryList = computed(() => homeList.value.categoryList);
// 列表数据
const onLoad = () => {
  let tim = setTimeout(() => {
    finished.value = true;
    clearTimeout(tim);
  }, 5000);
};
// 获取首页数据
onMounted(() => {
  getHomeList().then((res) => {
    homeList.value = res.data;
  });
});
// 导航点击事件
function ChannelJump(id) {
  console.log(111);
  router.push(`/channel?id=${id}`);
}
// 跳转详情页
function goDetail(id) {
  router.push(`/detail?id=${id}`);
}
</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding-bottom: 3.125rem;
  box-sizing: border-box;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 12.5rem;
  line-height: 12.5rem;
  text-align: center;
}
.my-swipe .van-swipe-item img {
  width: 100%;
}
.text {
  height: 100%;
  position: absolute;
  left: 1.25rem;
  top: 0.625rem;
}
.text > h4 {
  font-size: 1rem;
  line-height: 1rem;
  font-weight: 200;
  color: #fff;
}
.text > span {
  font-size: 1.25rem;
  line-height: 1.25rem;
  color: red;
}
:deep(.van-nav-bar__title) {
  font-size: 1.125rem;
}
.week {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.week > h4 {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25rem;
  padding: 0;
  margin: 0;
}
.van-nav-bar {
  margin-top: 1.25rem;
}

.week > span {
  color: #8b0000;
  font-size: 1.125rem;
  margin-top: 0.625rem;
}
:deep(.van-grid-item__content) {
  padding: 0;
}
:deep(.van-card__title) {
  height: 1.25rem;
  font-size: 1.125rem;
  margin-top: 0.625rem;
  line-height: 1;
}
:deep(.van-card__price-integer) {
  color: red;
}
:deep(.van-card__price) {
  color: red;
  font-size: 1.125rem;
}
.select {
  width: 100%;
  box-sizing: border-box;
}
.select img {
  height: 12.5rem;
}
.select h2 {
  font-size: 1rem;
  width: 80%;
  font-weight: 600;
}
.select p {
  font-size: 1rem;
  width: 80%;
  line-height: 1.125rem;
}
:deep(.van-swipe-item) {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 0.625rem;
  box-sizing: border-box;
}
.list > li {
  width: 48%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 0.625rem;
  border: 1px solid #f6f6f6;
  border-radius: 0.3125rem;
}
.list > li > h4 {
  width: 100%;
  font-size: 1rem;
  line-height: 1.125rem;
  font-weight: 500;
  margin-bottom: 0;
}
.list > li > span {
  line-height: 1;
  margin: 0.625rem 0;
  color: red;
}
.list > li > img {
  width: 100%;
}
</style>
